{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"用户充值",back:1} %}

    <div class="bcf bdtso pad10 lh2 c12">
        <div>充值金额</div>
        <div class="padt20 padb20 bdbda flrc">
            <div class="fs24 c11">￥</div>
            <div class="flex1"><input v-model="money" class="fs14" type="text" placeholder="请输入充值金额"></div>
        </div>
        <div class="c12 op7 padt3 fs7">
{#            注意事项，充值不能立刻提现#}
        </div>
    </div>


    <mu-tabs :value.sync="curTab" change="tab" indicator-color="orange400" inverse full-width>
        <mu-tab>
            <div class="c12 fs8">在线充值</div>
        </mu-tab>
        <mu-tab>
            <div class="c12 fs8">网银转账</div>
        </mu-tab>
    </mu-tabs>
    <div v-if="curTab == 0">
        <div class="bcf fs9 bdtso pad10 lh2 c12 ">
            <div class="">在线支付</div>
            <div class="">
                <mu-ripple class="pos-r flrc" @click="payType = 100">
                    <div class="wh15-15 flcc">
                        <svg t="1582339887420" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4798" width="7vw" height="7vw">
                            <path d="M896.002399 0 127.997601 0C57.597193 0 0 57.597193 0 127.997601l0 768.004799c0 70.400408 57.597193 127.997601 127.997601 127.997601l768.004799 0c70.400408 0 127.997601-57.597193 127.997601-127.997601L1024 127.997601C1024 57.597193 966.402807 0 896.002399 0L896.002399 0zM512.003199 787.203863c-44.800376 0-83.203623-6.400968-121.603031-19.205463-25.600032 12.803215-63.99944 44.800376-76.801376 51.201344-25.601312 12.803215-19.199064-12.796817-19.199064-12.796817l12.801936-76.801376c-76.802655-51.201344-121.603031-134.399848-121.603031-224.0006 0-159.99988 147.197945-288.002599 326.403287-288.002599 108.798536 0 211.196105 51.201344 268.799696 121.601752L460.801856 486.401888c0 0-25.601312 12.798096-51.201344-6.400968l-51.201344-38.399408c0 0-38.399408-32.001-19.200344 19.200344l51.201344 115.200784c0 0 6.400968 31.995881 44.800376 12.798096 32.002279-12.798096 268.799696-159.99988 371.201104-217.598352 19.199064 38.399408 31.997161 83.198504 31.997161 127.997601C838.400088 652.798896 691.202143 787.203863 512.003199 787.203863L512.003199 787.203863zM512.003199 787.203863"
                                  p-id="4799" fill="#1afa13"></path>
                        </svg>
                    </div>
                    <div class="flex1">微信</div>
                    <div class="fs12">
                        <span class="fa fa-circle c01" v-if="payType == 100"></span>
                        <span class="fa fa-circle-thin" v-if="payType != 100"></span>
                    </div>
                </mu-ripple>
                <mu-ripple class="pos-r flrc" @click="payType = 200">
                    <div class="wh15-15 flcc">
                        <svg t="1582339703388" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="3787" width="9vw" height="9vw">
                            <path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z"
                                  fill="#02A9F1" p-id="3788"></path>
                        </svg>
                    </div>
                    <div class="flex1">支付宝</div>
                    <div class="fs12">
                        <span class="fa fa-circle c01" v-if="payType == 200"></span>
                        <span class="fa fa-circle-thin" v-if="payType != 200"></span>
                    </div>
                </mu-ripple>
            </div>
        </div>
        <div class="pad10">
            <mu-button @click="doPay()" color="success" full-width large round>确认支付</mu-button>
        </div>
    </div>

    <div v-if="curTab == 1">
        <div class="bcf bdtso pad10 lh2 c12 fs9">
            <div class="c02 fwb">*转账备注</div>
            <div class="mar5">
                <div class="flcc">
                    <div class="fs16 c11">[[phone]]</div>
                    <div class="fs8 c12">当前手机号</div>
                </div>
                <div class="fs8 tac">转账时请 <span class="red fwb">务必</span> 在 <span class="red fwb">备注</span> 中填写您的 <span class="red fwb">手机号</span></div>
            </div>

            <div class="padtb9 bdtda  mart5">转账账号</div>
            <div class="fs8 mar5 bdso round3 pad5 card c13" v-for="item in cards">
                <div class="flrc">
                    <div class="flex1">银行名称：</div>
                    <div>[[item.bank]]</div>
                </div>
                <div class="flrc">
                    <div class="flex1">开户行：</div>
                    <div>[[item.bankAddress]]</div>
                </div>
                <div class="flex-r flex-end">
                    <div class="flex1">账号名称：</div>
                    <div class="">[[item.name]]</div>
                </div>
                <div class="flex-r flex-end">
                    <div class="flex1">银行账号：</div>
                    <div class="fs12 fwb">[[item.card]]</div>
                </div>
            </div>
            <div class="padtb9 bdtda  mart5">扫码转账</div>
            <div class="fs8 mar5 bdso round3 pad5 c11" v-for="item in codes">
                <div class="flrc">
                    <div class="flcc wh50-50">
                        <img class="wh50-50" :src="picUrl(item.qrCode)" alt="">
                    </div>
                </div>
                <div class="flrc padl20 padr20">
                    <div class="flex1">名称：</div>
                    <div class="">[[item.name]]</div>
                </div>
                <div class="flrc padl20 padr20">
                    <div class="flex1">账号：</div>
                    <div>[[item.account]]</div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block myJs %}
    <script src="{{ root }}/js/ali.js{{ rnd }}"></script>
    <script src="{{ root }}/js/wx.js{{ rnd }}"></script>
{% endblock %}